<!DOCTYPE html>
<style>
#test {
  color: blue;
}
#test:hover {
  color: green;
}
</style>
<script src="../../resources/js-test.js"></script>
<script>

function verify(expectedColor)
{
    shouldBeEqualToString('window.getComputedStyle(document.getElementById("test")).color', expectedColor);
}

function runTest()
{
    if (!window.eventSender)
        return false;

    document.onclick = function () { testFailed("Click should not have bubbled from embed!"); };
    var pluginElement = document.getElementById('plugin');
    var x = pluginElement.offsetLeft + pluginElement.offsetWidth / 2;
    var y = pluginElement.offsetTop + pluginElement.offsetHeight / 2;
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseUp();

    var testElement = document.getElementById('test');
    x = testElement.offsetLeft + testElement.offsetWidth / 2;
    y = testElement.offsetTop + testElement.offsetHeight / 2;

    eventSender.mouseMoveTo(x, y);
    verify('rgb(0, 128, 0)');
}
</script>
<body onload="runTest()">
<p>Test that mouse state is correctly reset after clicking on a node that captures mouse events. To run this test, first click on the embed element, then mouse over "Hover me". It should change from blue to green.
<embed id="plugin" type="application/x-shockwave-flash"></embed>
<p><a id="test" href="#">Hover me</a>
<div id="console"></div>
</body>
